<template>
  <div class="exam-detail-container">
    <!-- 顶部导航 -->
    <div class="header">
      <van-icon name="arrow-left" class="back-icon" @click="navigateBack" />
      <h1 class="title">考试详情</h1>
      <van-icon name="ellipsis" class="more-icon" />
    </div>

    <!-- 考试信息 -->
    <div class="exam-info">
      <h2 class="exam-title">{{ exam.name }}</h2>
      <div class="info-item">
        <van-icon name="calendar" size="16" class="info-icon" />
        <span class="info-text">考试时间 {{ exam.time }}</span>
      </div>
      <div class="info-item">
        <van-icon name="clock" size="16" class="info-icon" />
        <span class="info-text">考试时长 {{ exam.duration }}分钟</span>
      </div>
      <div class="info-item">
        <van-icon name="file-text" size="16" class="info-icon" />
        <span class="info-text">题目数量 {{ exam.questionCount }}题</span>
      </div>
      <div class="info-item">
        <van-icon name="credit-card" size="16" class="info-icon" />
        <span class="info-text">总分 {{ exam.totalScore }}分</span>
      </div>
      <div class="info-item">
        <van-icon name="check-circle" size="16" class="info-icon" />
        <span class="info-text">及格分 {{ exam.passScore }}分</span>
      </div>
    </div>

    <!-- 考试说明 -->
    <div class="exam-description">
      <h3 class="section-title">考试说明</h3>
      <p class="description-text">{{ exam.description }}</p>
    </div>

    <!-- 注意事项 -->
    <div class="exam-instructions">
      <h3 class="section-title">注意事项</h3>
      <ul class="instructions-list">
        <li v-for="(item, index) in exam.instructions" :key="index" class="instruction-item">{{ item }}</li>
      </ul>
    </div>

    <!-- 开始考试按钮 -->
    <div class="action-button">
      <van-button
        type="primary"
        block
        size="large"
        @click="startExam"
      >
        开始考试
      </van-button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getExamDetail } from '@/api/examApi'

export default {
  name: 'ExamDetail',
  setup() {
    const router = useRouter()
    const examId = ref(router.currentRoute.value.params.id)
    const exam = ref({
      id: '',
      title: '',
      description: '',
      duration: 0,
      startTime: '',
      endTime: '',
      totalScore: 0
    })

    // 获取考试详情
    const fetchExamDetail = () => {
      getExamDetail(examId.value)
        .then(res => {
          if (res.success && res.data) {
            exam.value = res.data
          } else {
            console.error('获取考试详情失败')
          }
        })
        .catch(err => {
          console.error('获取考试详情失败:', err)
        })
    }

    // 开始考试
    const startExam = () => {
      router.push(`/exam/${examId.value}/progress`)
    }

    // 导航回上一页
    const navigateBack = () => {
      router.push('/examList')
    }

    // 初始化
    onMounted(() => {
      fetchExamDetail()
    })

    return {
      exam,
      startExam,
      navigateBack
    }
  }
}
</script>

<style scoped>
.exam-detail-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-icon,
.more-icon {
  color: white;
  font-size: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: white;
}

.exam-info {
  background-color: white;
  padding: 20px 15px;
  margin: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.exam-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.info-icon {
  color: #888;
  margin-right: 10px;
}

.info-text {
  font-size: 14px;
  color: #666;
}

.exam-description,
.exam-instructions {
  background-color: white;
  padding: 15px;
  margin: 0 15px 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.description-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.instructions-list {
  padding-left: 20px;
}

.instruction-item {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.6;
}

.action-button {
  padding: 0 15px;
  margin-top: auto;
}
</style>

<style scoped>
.exam-detail-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-icon,
.more-icon {
  color: white;
  font-size: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: white;
}

.exam-info {
  background-color: white;
  padding: 20px 15px;
  margin: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.exam-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.info-icon {
  color: #888;
  margin-right: 10px;
}

.info-text {
  font-size: 14px;
  color: #666;
}

.exam-description,
.exam-instructions {
  background-color: white;
  padding: 15px;
  margin: 0 15px 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.description-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.instructions-list {
  padding-left: 20px;
}

.instruction-item {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.6;
}

.action-button {
  padding: 0 15px;
  margin-top: auto;
}
</style>